<!--
 * @Description: OSPF 实例新建、编辑
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-12 16:06:01
 * @LastEditTime: 2021-11-01 17:07:25
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <h1 class="title">{{diagTitle}}</h1>
      <!-- 新建OSPF -->
      <el-form
        ref="ospfForm"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right"
        class="form"
      >
        <el-form-item
          label="实例ID"
          prop="instanceId"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="1"
              :max="65535"
              v-model="form.instanceId"
              :disabled="form.id ? true : false"
            ></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item label="VRF名称" prop="vrf">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.vrf" style="width:100%;" clearable>
              <el-option
                v-for="(item, index) in vrfList"
                :key="index"
                :value="item.vrf"
                :label="item.vrf"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="路由ID"
          prop="routerId"
          :rules="[
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.routerId" placeholder="IP地址格式"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="缺省Metric"
          prop="defaultMetric"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="1"
              :max="16777214"
              v-model="form.defaultMetric"
              placeholder="范围：1-16777214"
            ></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item
          label="域ID"
          prop="domainId"
          :rules="[
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.domainId" placeholder="IP地址格式"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="路由过滤" prop="routeEnble" v-if="form.id">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch v-model="form.routeEnble"></el-switch>
          </el-col>
        </el-form-item>
        <template v-if="form.routeEnble">
          <el-form-item label="路由列表">
            <el-button icon="el-icon-plus" type="text" @click="routeStatus = true">添加</el-button>
            <el-table border :data="routeList" class="ip-table" style="width: 100%" height="300px">
              <!-- IP地址 -->
              <el-table-column label="IP地址" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.addr ? scope.row.addr : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 掩码地址 -->
              <el-table-column label="掩码地址" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.mask ? scope.row.mask : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 优先级 -->
              <el-table-column label="优先级" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.preference ? scope.row.preference : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 精确匹配 -->
              <el-table-column label="精确匹配" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.exact ? '是' : '否'}}</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column fixed="right" align="center" label="操作" width="80px">
                <!-- 删除 -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color: #FA6962"
                    icon="el-icon-delete"
                    class="table-btn"
                    @click="handleDeleteIP('route',scope)"
                    v-power="scope.row.vrfId === $store.state.user.user.info.dgId ? 2 : 0"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <!-- 邻居配置 -->
        <el-form-item label="邻居配置" prop="neighborEnble" v-if="form.id">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch v-model="form.neighborEnble"></el-switch>
          </el-col>
        </el-form-item>
        <template v-if="form.neighborEnble">
          <el-form-item label="邻居列表">
            <el-button icon="el-icon-plus" type="text" @click="neighborStatus = true">添加</el-button>
            <el-table
              border
              :data="neighborList"
              class="ip-table"
              style="width: 100%"
              height="300px"
            >
              <!-- IP地址 -->
              <el-table-column label="IP地址" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.addr ? scope.row.addr : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 花费值 -->
              <el-table-column label="花费值" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.cost ? scope.row.cost : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 优先级 -->
              <el-table-column label="优先级" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.priority ? scope.row.priority : '-'}}</span>
                </template>
              </el-table-column>
              <!-- Pollinterval(s) -->
              <el-table-column label="Pollinterval(s)" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.pollInterval ? scope.row.pollInterval : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column fixed="right" align="center" label="操作" width="80px">
                <!-- 删除 -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color: #FA6962"
                    icon="el-icon-delete"
                    class="table-btn"
                    @click="handleDeleteIP('neighbor',scope)"
                    v-power="scope.row.vrfId === $store.state.user.user.info.dgId ? 2 : 0"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <!-- 重分发 -->
        <el-form-item label="重分发" prop="redistributes">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-checkbox-group v-model="form.redistributes">
              <el-checkbox label="connected">直连路由</el-checkbox>
              <el-checkbox label="staticed">静态路由</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm">{{form.id ? '保存': '创建'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新建配置 -->
    <el-dialog
      v-if="routeStatus"
      title="新建配置"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="routeStatus"
    >
      <el-form ref="routeForm" :model="routeForm" label-width="120px">
        <!-- IP地址 -->
        <el-form-item
          label="IP地址"
          prop="addr"
          :rules="[
                  {required: true, message: '请检查必填项！',trigger: 'blur'},
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-input v-model="routeForm.addr" placeholder="IP地址格式"></el-input>
        </el-form-item>
        <!-- 掩码地址 -->
        <el-form-item
          label="掩码地址"
          prop="mask"
          :rules="[
                  {required: true, message: '请检查必填项！',trigger: 'blur'},
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-input v-model="routeForm.mask" placeholder="IP格式"></el-input>
        </el-form-item>
        <!-- 优先级 -->
        <el-form-item
          label="优先级"
          prop="preference"
          :rules="{required: true, message: '请检查必填项！',trigger: 'change'}"
        >
          <el-input-number :min="1" :max="65535" v-model="routeForm.preference"></el-input-number>
        </el-form-item>
        <!-- 精确匹配 -->
        <el-form-item label="精确匹配" prop="exact">
          <el-switch v-model="routeForm.exact"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="cancelIP('route')">取消</el-button>
        <el-button type="primary" @click="submitIP('route')">确认</el-button>
      </span>
    </el-dialog>
    <!-- 新建邻居 -->
    <el-dialog
      v-if="neighborStatus"
      title="新建邻居"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="neighborStatus"
    >
      <el-form ref="neighborForm" :model="neighborForm" label-width="120px">
        <!-- IP地址 -->
        <el-form-item
          label="IP地址"
          prop="addr"
          :rules="[
                  {required: true, message: '请检查必填项！',trigger: 'blur'},
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-input v-model="neighborForm.addr" placeholder="IP地址" style="width:85%"></el-input>
        </el-form-item>
        <!-- 花费值 -->
        <el-form-item
          label="花费值"
          prop="cost"
          :rules="{required: true, message: '请检查必填项！',trigger: 'change'}"
        >
          <el-input-number :min="1" :max="65535" v-model="neighborForm.cost"></el-input-number>
        </el-form-item>
        <!-- 优先级 -->
        <el-form-item
          label="优先级"
          prop="priority"
          :rules="{required: true, message: '请检查必填项！',trigger: 'change'}"
        >
          <el-input-number :min="1" :max="65535" v-model="neighborForm.priority"></el-input-number>
        </el-form-item>
        <!-- Pollinterval（s） -->
        <el-form-item
          label="Pollinterval(s)"
          prop="pollInterval"
          :rules="{required: true, message: '请检查必填项！',trigger: 'change'}"
        >
          <el-input-number :min="1" :max="65535" v-model="neighborForm.pollInterval"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="cancelIP('neighbor')">取消</el-button>
        <el-button type="primary" @click="submitIP('neighbor')">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['ne', 'vrfList', 'row'],
  data () {
    return {
      diagTitle: '新建OSPF实例',
      form: {
        id: null,
        instanceId: 1,
        vrf: null,
        routerId: null,
        nsf: false,
        gracePeriod: 120,
        maximumPaths: 1,
        defaultMetric: 21,
        autoCost: 100,
        maxMetricType: 'Disable',
        maxMetricTimeout: 0,
        opaqueLSA: true,
        ignoreVRFLoopPrev: false,
        timerSpf: 1,
        timerFRR: 1,
        timerLSAGrpPacing: 1,
        domainId: null,
        domainTagEnable: false,
        domainTag: null,
        neighborEnble: false,
        routeEnble: false,
        redistributes: []
      },
      rules: {},
      routeStatus: false,
      routeForm: {
        addr: null,
        mask: null,
        preference: 1,
        exact: false,
      },
      routeList: [],
      neighborStatus: false,
      neighborForm: {
        addr: null,
        cost: 10,
        priority: 1,
        pollInterval: 4
      },
      neighborList: []
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.handleRouteTable(_this.row);
    });

  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDiag', 0);
    },
    // 处理子表
    handleRouteTable (row) {
      let _this = this;
      if (row && row.id) {
        _this.diagTitle = '编辑OSPF实例';
        _this.form = {
          id: row.id,
          instanceId: row.instanceId,
          vrf: row.vrf,
          routerId: row.routerId,
          nsf: row.nsf,
          gracePeriod: row.gracePeriod,
          maximumPaths: row.maximumPaths,
          defaultMetric: row.defaultMetric,
          autoCost: row.autoCost,
          maxMetricType: row.maxMetricType,
          maxMetricTimeout: row.maxMetricTimeout,
          opaqueLSA: row.opaqueLSA,
          ignoreVRFLoopPrev: row.ignoreVRFLoopPrev,
          timerSpf: row.timerSpf,
          timerFRR: row.timerFRR,
          timerLSAGrpPacing: row.timerLSAGrpPacing,
          domainId: row.domainId,
          domainTagEnable: row.domainTag ? true : false,
          domainTag: row.domainTag,
          neighborEnble: false,
          routeEnble: false,
          redistributes: []
        };
        _this.routeList = [];
        _this.neighborList = [];
        if (row.filters.length > 0) {
          _this.form.routeEnble = true;
          _this.routeList = row.filters;
        }
        if (row.neighbors.length > 0) {
          _this.form.neighborEnble = true;
          _this.neighborList = row.neighbors;
        }
        if (row.redistributes.length > 0) {
          _this.form.redistributes = row.redistributes;
        }
      }

    },
    // 清除空表单数据
    clearData (type) {
      let _this = this;
      if (type === 'route') {
        _this.routeForm = {
          addr: null,
          mask: null,
          preference: 1,
          exact: false
        };
      } else {
        _this.neighborForm = {
          addr: null,
          cost: 10,
          priority: 1,
          pollInterval: 4
        };
      }
    },
    // 删除路由列表或者邻居列表
    handleDeleteIP (type, scope) {
      let _this = this;
      if (type === 'route') {
        _this.routeList.splice(scope.$index, 1);
      } else {
        _this.neighborList.splice(scope.$index, 1);
      }
    },
    submitIP (type) {
      let _this = this;
      if (type === 'route') {
        _this.$refs['routeForm'].validate(valid => {
          if (valid) {
            _this.routeStatus = false;
            _this.routeList.push({
              addr: _this.routeForm.addr,
              mask: _this.routeForm.mask,
              preference: _this.routeForm.preference,
              exact: _this.routeForm.exact,
            });
            _this.clearData('route');
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.$refs['neighborForm'].validate(valid => {
          if (valid) {
            _this.neighborStatus = false;
            _this.neighborList.push({
              addr: _this.neighborForm.addr,
              cost: _this.neighborForm.cost,
              priority: _this.neighborForm.priority,
              pollInterval: _this.neighborForm.pollInterval
            });
            _this.clearData('neighbor');
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      }
    },
    // 取消
    cancelIP (type) {
      let _this = this;
      if (type === 'route') {
        _this.routeStatus = false;
      } else {
        _this.neighborStatus = false;
      }
    },
    // 提交
    submitForm () {
      let _this = this;
      _this.$refs['ospfForm'].validate(valid => {
        if (valid) {
          let params = {
            instanceId: _this.form.instanceId,
            vrf: _this.form.vrf,
            routerId: _this.form.routerId,
            nsf: _this.form.nsf,
            gracePeriod: _this.form.gracePeriod,
            maximumPaths: _this.form.maximumPaths,
            defaultMetric: _this.form.defaultMetric,
            autoCost: _this.form.autoCost,
            maxMetricType: _this.form.maxMetricType,
            maxMetricTimeout: _this.form.maxMetricTimeout,
            opaqueLSA: _this.form.opaqueLSA,
            ignoreVRFLoopPrev: _this.form.vrf ? _this.form.ignoreVRFLoopPrev : false,
            timerSpf: _this.form.timerSpf,
            timerFRR: _this.form.timerFRR,
            timerLSAGrpPacing: _this.form.timerLSAGrpPacing,
            domainId: _this.form.domainId,
            domainTag: _this.form.domainTagEnable ? _this.form.domainTag : 0,
            redistributes: _this.form.redistributes.length > 0 ? _this.form.redistributes : []
          };
          if (_this.form.id) {
            if (_this.form.routeEnble) {
              let routeList = [];
              for (let i = 0; i < _this.routeList.length; i++) {
                routeList.push({
                  addr: _this.routeList[i].addr,
                  mask: _this.routeList[i].mask,
                  exact: _this.routeList[i].exact,
                  preference: _this.routeList[i].preference
                });
              }
              params.filters = routeList;
            }
            if (_this.form.neighborEnble) {
              let list = [];
              for (let i = 0; i < _this.neighborList.length; i++) {
                list.push({
                  addr: _this.neighborList[i].addr,
                  cost: _this.neighborList[i].cost,
                  priority: _this.neighborList[i].priority,
                  pollInterval: _this.neighborList[i].pollInterval
                });
              }
              params.neighbors = list;
            }
          }
          let paras = _this.form.id ? { updates: [params] } : { adds: [params] };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'l3proctocol.ospf.inst.set',
              paras: paras
            }
          }).then(res => {
            if (res) {
              _this.$parent.refresh();
              _this.$message({
                type: 'success',
                message: _this.form.id ? '更新成功！' : '创建成功！'
              });
              _this.$bus.$emit('isCreateCase', true);
              _this.cancel();
            }
          });
        } else {
          _this.$message.console.error('请检查必填项！');
        }
      });
    }
  },
  beforeDestroy () {
    let _this = this;
    _this.$bus.$off('isCreateCase', false);
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 0px;
      box-sizing: border-box;
    }
  }
  ::v-deep .el-input-number {
    width: 235px;
  }
  .table-btn {
    padding: 0;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    ::v-deep .el-input-number {
      width: 195px;
    }
  }
}
</style>